<template>
	<view class="cotent">
		<!-- 头部导航 -->
		<view class="navigationBar" :style="'height:'+(bottom+7)+'px'">
			<view :style="'height:'+height+'px;'+'margin-top:'+top+'px'">
				<u-icon name="arrow-left" size="40" @click="back_Info"></u-icon>
				<text>2222</text>
			</view>
		</view>
		<!-- 信息部分 -->

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" 
	      :scroll-into-view="scollview"	scroll-with-animation="true"
		  :style="'height:'+Sc_height+'rpx;'">
			<view v-for="(item,index) in ChatArr" :key="index" :id="item.tip"><!-- type(1) -->
				<!-- 左边 -->
				<view class="Scro-Top send-left" v-if="item.id!=1">
					<view>
						<image src="../../static/logo.png" mode=""></image>
					</view>
					<view v-if="item.types==1">{{item.massage}}</view>
					<view v-if="item.types==0" style="background-color: white;">
						<image :src="item.massage" @tap="preview(item.massage)"></image>
					</view>
				</view>
				<!-- 右边 -->
				<view class="Scro-Top send-right" v-if="item.id==1">
					<view>
						<image src="../../static/logo.png" mode=""></image>
					</view>
					<view v-if="item.types==1">{{item.massage}}</view>
					<view v-if="item.types==0" style="background-color: white;">
						<image :src="item.massage"  @tap="preview(item.massage)"></image>
					</view>
			
				</view>
			</view>
		</scroll-view>

		<!-- 输入框 -->
		<view class="Send-box">
			<u-icon name="volume" size="50"></u-icon>
			<u-input v-model="send_value" type="textarea" border="true" height="50" auto-height="true" />
			<u-icon name="plus-circle" size="50" @click="funshow"></u-icon>
			<u-button size="mini" @click="Funsend">发送</u-button>
		</view>
		<view class="tool-box" v-if="tool_show">

		</view>
	</view>
</template>

<script>
	import {
		Chatrecords
	} from '../../Common/Send_text.js';
	export default {
		data() {
			return {
				post: {},
				top: "",
				bottom: "",
				height: "",
				width: "",
				left: "",
				right: "",
				ChatArr:[],
				send_value: "",
				Sc_height: null,
				tool_show: false,
				winHeigth:null,
				scollview:'',
				previewImg:[],
			}
		},
		onLoad(option) {
			let _this=this;
			// this.post = JSON.parse(decodeURIComponent(option.post));
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.top = menuButtonInfo.top;
			this.bottom = menuButtonInfo.bottom;
			this.height = menuButtonInfo.height;
			this.width = menuButtonInfo.width;
			this.left = menuButtonInfo.left;
			this.right = menuButtonInfo.right;
			this.ChatArr = Chatrecords;
			for(let i=0;i<this.ChatArr.length;i++){
				this.ChatArr[i].tip="msg"+this.ChatArr[i].tip;
				this.scollview=this.ChatArr[i].tip;
				if(this.ChatArr[i].types==0){
					this.previewImg.push(this.ChatArr[i].massage)
				}
			}
			console.log(this.ChatArr);
			uni.getSystemInfo({
					success: function(res) {
						_this.winHeigth=res.windowHeight;
						if(res.windowHeight>736){
							_this.Sc_height=1340;
						}else{
							_this.Sc_height=1140;
						}
					}
			});
		},
		methods: {

			// 预览图片
			preview(Img){
				let index=0;
				for(let i=0;i<this.previewImg.length;i++){
					this.previewImg[i]==Img;
					index=Img;
				}
				uni.previewImage({
				current:index,
				urls:this.previewImg,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
			},
			// 发送信息
			Funsend(){
				if(this.send_value!=""){
					this.ChatArr.push({
						id:1,
						massage:this.send_value,
						tip:this.send_value.length+1,
						types:1,
						time:new Date()-1000*60*60
					});
					this.send_value="";
				for(let i=0;i<this.ChatArr.length;i++){
						this.ChatArr[i].tip="msg"+this.ChatArr[i].tip;
						this.scollview=this.ChatArr[i].tip;
					}
				}
			},
			
			// 返回上一级
			back_Info() {
				uni.navigateBack({
					delta: 1,
				});
			},
			funshow() {
				for(let i=0;i<this.ChatArr.length;i++){
						this.ChatArr[i].tip="msg"+this.ChatArr[i].tip;
						this.scollview=this.ChatArr[i].tip;
					}
				if(this.winHeigth>736){
				if (this.tool_show == false) {
					this.tool_show = true;
					this.Sc_height = 950;
				} else {
					this.tool_show = false;
					this.Sc_height = 1340;
				}	
				}else{
					if (this.tool_show == false) {
						this.tool_show = true;
						this.Sc_height = 800;
					} else {
						this.tool_show = false;
						this.Sc_height = 1140;
					}	
				}
				for(let i=0;i<this.ChatArr.length;i++){
					this.ChatArr[i].tip="msg"+this.ChatArr[i].tip;
					this.scollview=this.ChatArr[i].tip;
				}
			},

		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped>
	.tool-box {
		height: 420rpx;
		background-color: gainsboro;
	}

	.Send-box>u-input {
		width: 500rpx;
	}

	.Send-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}


	.send-right {
		 flex-direction: row-reverse;
	}

	.Scro-Top>view:nth-of-type(2) {
		background-color: #00ff00;
		min-width: 100rpx;
		max-width: 500rpx;
		margin-left: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
	}

	.Scro-Top>view:nth-of-type(1)>image {
		height: 100rpx;
		width: 100rpx;
		margin-left: 20rpx;
	}

	.Scro-Top {
		display: flex;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}

	@media screen and (max-width:736px) {
		.scroll-Y {
			height: 700rpx;
		}
	}

	.scroll-Y {
		display: flex;
		flex-direction: column;
	}


	.navigationBar>view:nth-of-type(1)>text {
		margin-left: 40%;
		font-size: 40rpx;
	}
	.navigationBar>view:nth-of-type(1)>u-icon {
		 margin-left: 20rpx;
	}
	.navigationBar>view:nth-of-type(1) {

		display: flex;
		align-items: center;
	}

	.navigationBar {
		/* border: 1px solid red; */
	}

	.cotent {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
</style>